<template>
  <div class="analysisReport">
    <h2 class="report-Title">{{ $route.query.title }}</h2>
    <div class="content">
      <div class="list-box">
        <div class="title">
          <div>
            <h3>质控点整体完成情况</h3>
            <i :class="`${problemVisible?'el-icon-arrow-down':'el-icon-arrow-up'}`" @click="problemVisible=!problemVisible"></i>
          </div>
        </div>
        <div v-show="problemVisible" class="echarts-box">
          <div>
            <upStandard title="标准达标率" :data="monitorData.reachTotal"></upStandard>
          </div>
          <div>
            <upStandard class-name="target-standard" title="目标达标率" :data="monitorData.finishTotal"></upStandard>
          </div>
          <div>
            <warningEchart :warningData="monitorData"></warningEchart>
          </div>
        </div>
      </div>

      <div class="list-box">
        <div class="title">
          <div>
            <h3>未完成标准质控点</h3>
            <i :class="`${reachVisible?'el-icon-arrow-down':'el-icon-arrow-up'}`" @click="reachVisible=!reachVisible"></i>
          </div>
        </div>
        <targetList :isResult="false" v-show="reachVisible" :tableData="noReachData"></targetList>
      </div>

      <div class="list-box">
        <div class="title">
          <div>
            <h3>未完成目标质控点</h3>
            <i :class="`${finishVisible?'el-icon-arrow-down':'el-icon-arrow-up'}`" @click="finishVisible=!finishVisible"></i>
          </div>
        </div>
        <targetList :isResult="false" v-show="finishVisible" :tableData="noFinishData"></targetList>
      </div>

      <div class="list-box">
        <div class="title">
          <div>
            <h3>质控点预警次数统计表</h3>
            <i :class="`${warningVisible?'el-icon-arrow-down':'el-icon-arrow-up'}`" @click="warningVisible=!warningVisible"></i>
          </div>
        </div>
        <comparisonList v-show="warningVisible" :tableData="warningData"></comparisonList>
      </div>

      <div class="list-box">
        <div class="title">
          <div>
            <h3>目标标准完成情况纵向对比</h3>
            <i :class="`${finishYVisible?'el-icon-arrow-down':'el-icon-arrow-up'}`" @click="finishYVisible=!finishYVisible"></i>
          </div>
          <div>
            <span>纵向对比年份：</span>
            <el-select v-model="year" placeholder="请选择所属年份" @change="getTargetByYear">
              <el-option v-for="year in yearArr" :key="year" :label="`${year}年`" :value="year"></el-option>
            </el-select>
            <el-select v-model="standardIdY" placeholder="暂无目标标准" style="margin-left: 10px" disabled>
              <el-option v-for="(item,index) in standardArrY" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <targetList v-show="finishYVisible" :isResult="true" :tableData="tableDataY"></targetList>
      </div>

      <div class="list-box">
        <div class="title">
          <div>
            <h3>目标标准完成情况横向对比</h3>
            <i :class="`${finishXVisible?'el-icon-arrow-down':'el-icon-arrow-up'}`" @click="finishXVisible=!finishXVisible"></i>
          </div>
          <div>
            <span>横向对比对象：</span>
            <el-select v-model="standardIdX" placeholder="请选择横向对比对象" @change="getComparePointDataX">
              <el-option v-for="(item,index) in standardArrX" :key="index" :label="realName +' '+ item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <targetList v-show="finishXVisible" :isResult="true" :tableData="tableDataX"></targetList>
      </div>
    </div>
  </div>
</template>

<script>
import upStandard from '@/components/echarts/up-standard'
import warningEchart from '@/components/echarts/warning'
import targetList from '@/components/cardToList/targetList'
import warnList from '@/components/cardToList/warnList'
import comparisonList from '@/components/cardToList/comparisonList'
import { getMonitorInfo, getPointAll, getTargetByYear, getTargetByObject, getComparePointData } from '@/api/improve'

export default {
  name: 'analysisReport',
  components: {
    upStandard,
    warningEchart,
    targetList,
    warnList,
    comparisonList
  },
  data() {
    return {
      tableDataX: [],
      tableDataY: [],
      year: '',
      rangeId: '',
      objectId: '',
      // 当前目标标准Id
      targetStandardId: '',
      // 整体情况
      monitorData: {},
      // 未达标指标
      noReachData: [],
      // 未完成目标
      noFinishData: [],
      // 预警信息记录
      warningData: [],
      // 横向对比下拉对象
      rectificationObject: [],
      // 需要对比的目标标准
      standardIdY: '',
      standardIdX: '',
      standardArrX: [],
      standardArrY: [],
      // 显示与隐藏
      problemVisible: true,
      reachVisible: true,
      warningVisible: true,
      finishVisible: true,
      finishXVisible: true,
      finishYVisible: true,
      // 当前目标标准的责任人
      realName: ''
    }
  },
  computed: {
    yearArr() {
      return this.$config.yearArr()
    }
  },
  created() {
    this.targetStandardId = this.$route.query.id
    this.rangeId = this.$route.query.rangeId
    this.objectId = this.$route.query.objectId
    this.year = this.yearArr[1] // 默认显示去年
    this.realName = this.$route.query.realName
    this.getMonitorInfo()
    this.getPointAll()
    this.getTargetByYear()
    this.getTargetByObject()
  },
  methods: {
    // 获取整体情况数据
    getMonitorInfo() {
      getMonitorInfo({ targetStandardId: this.targetStandardId })
        .then(res => {
          this.monitorData = res || {}
        })
        .catch(() => {})
    },
    // !=1未达标指标列表、!=2未完成目标列表、全部预警信息记录表
    getPointAll() {
      const params = {
        targetStandardId: this.targetStandardId
      }
      getPointAll(params)
        .then(res => {
          if (res.length) {
            this.warningData = [...res]
            res.forEach(item => {
              if (item.state != 2) {
                this.noFinishData.push(item)
              }
              if (item.state != 1) {
                this.noReachData.push(item)
              }
            })
          }
        })
        .catch(() => {})
    },
    // 目标标准纵向对比下拉值
    getTargetByYear() {
      // id-当前目标标准id,rectificationObjectId-当前目标标准的诊改对象
      const params = {
        id: this.targetStandardId,
        rectificationObjectId: this.objectId,
        year: this.year
      }
      getTargetByYear(params)
        .then(res => {
          this.standardArrY = res || []
          // 如果有值默认选中
          if (this.standardArrY.length) {
            this.standardIdY = this.standardArrY[0].id

            this.getComparePointDataY(this.standardIdY)
          } else {
            this.standardIdY = ''
            this.tableDataY = []
          }
        })
        .catch(() => {})
    },
    // 目标标准横向对比下拉值
    getTargetByObject() {
      // id-当前目标标准， rectificationRangeId-当前诊改范围
      const params = {
        id: this.targetStandardId,
        rectificationRangeId: this.rangeId
      }
      getTargetByObject(params)
        .then(res => {
          this.standardArrX = res || []

          if (res.length) {
            this.standardIdX = res[0].id
            this.getComparePointDataX(this.standardIdX)
          }
        })
        .catch(() => {})
    },
    // 横对比
    getComparePointDataX(standardId) {
      const params = {
        contrastTargetStandardId: standardId,
        currentTargetStandardId: this.targetStandardId
      }
      getComparePointData(params)
        .then(res => {
          this.tableDataX = res || []
        })
        .catch(() => {})
    },
    // 纵对比
    getComparePointDataY(standardId) {
      const params = {
        // 需要对比的目标标准id
        contrastTargetStandardId: standardId,
        // 当前目标标准id
        currentTargetStandardId: this.targetStandardId
      }
      getComparePointData(params)
        .then(res => {
          this.tableDataY = res || []
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.analysisReport {
  .report-Title {
    text-align: center;
    color: $yellow;
  }
  .content {
    /*padding: 0 30px;*/
    .list-box {
      margin-top: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid $yellow;
        > div {
          display: flex;
          align-items: center;
        }
        i {
          margin-left: 10px;
          font-weight: 600;
          font-size: 16px;
          color: $blue;
          cursor: pointer;
        }
      }
      .echarts-box {
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
